import React, {ReactNode, useEffect, useRef, useState} from "react";
import {KanbanCardProps, KanbanNewCardProps, listType} from './type.ts'
import logo from './assets/react.svg'
import './App.css'

const MINUTE = 60 * 1000
const HOUR = 60 * MINUTE
const DAY = 24 * HOUR
const UPDATE_INTERVAL = MINUTE
const KanbanCard: React.FC<KanbanCardProps> = ({title, status}) => {
    const [displayTime, setDisplayTime] = useState(status)
    useEffect(() => {
        const updateDisplayTime = () => {
            const timePassed = Date.now() - new Date(status).getTime()
            let relativeTime = '刚刚'
            if (timePassed >= DAY) relativeTime = `${Math.floor(timePassed / DAY)}天前`
            else if (timePassed >= HOUR) relativeTime = `${Math.floor(timePassed / HOUR)}小时前`
            else if (timePassed >= MINUTE) relativeTime = `${Math.floor(timePassed / MINUTE)}分钟前`
            setDisplayTime(relativeTime)
        }
        const intervalId = setInterval(updateDisplayTime, UPDATE_INTERVAL)
        updateDisplayTime()
        return () => {
            clearInterval(intervalId)
        }
    }, [status]);
    return (
        <li className="kanban-card">
            <div className="card-title">{title}</div>
            <div className="card-status">{displayTime}</div>
        </li>
    )
}
const KanbanNewCard: React.FC<KanbanNewCardProps> = ({addTodo}) => {
    const inputRef = useRef<HTMLInputElement>(null)
    const [inputValue, setInputValue] = useState('')
    const changeValue = ({target: {value}}: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(value)
    }
    const onkeydown = ({key}: React.KeyboardEvent<HTMLInputElement>) => {
        if (key === 'Enter' && inputValue) {
            addTodo({id: Date.now(), title: inputValue, status: '2022-1-1 18:00'})
            setInputValue('')
        }
    }
    useEffect(() => {
        inputRef.current?.focus()
    }, [inputRef]);
    return (
        <li className="kanban-card">
            <h3>添加新卡片</h3>
            <div className="card-title">
                <input value={inputValue} onChange={changeValue} onKeyDown={onkeydown} type="text" ref={inputRef}/>
            </div>
        </li>
    )
}
const KanbanBoard: React.FC<{ children: ReactNode }> = ({children}) => (
    <main className="kanban-board">{children}</main>)
const KanbanColumn: React.FC<{ children: ReactNode, title: ReactNode, className?: string }> = ({children, title, className}) => (
    <section className={`kanban-column ${className}`}>
        <h2>{title}</h2>
        <ul>{children}</ul>
    </section>
)

function App() {
    const [showAdd, setShowAdd] = useState(false)
    const [showAdd2, setShowAdd2] = useState(false)
    const [showAdd3, setShowAdd3] = useState(false)
    const [todoList, setTodoList] = useState([
        {id: 1, title: '开发任务-1', status: '2022-05-22 18:15'},
        {id: 2, title: '开发任务-1', status: '2022-05-22 18:15'},
        {id: 3, title: '开发任务-1', status: '2022-05-22 18:15'},
        {id: 4, title: '开发任务-1', status: '2022-05-22 18:15'},
    ])
    const [ongoingList, setOngoingList] = useState([
        {title: '开发任务-4', status: '2022-05-22 18:15'},
        {title: '开发任务-4', status: '2022-05-22 18:15'},
        {title: '开发任务-4', status: '2022-05-22 18:15'}
    ])
    const [doneList, setDoneList] = useState([
        {title: '测试任务-1', status: '2022-05-22 18:15'}
    ])
    const addTodo = (value: listType) => {
        setTodoList([value, ...todoList])
    }
    const addTodo2 = (value: listType) => {
        setOngoingList([value, ...ongoingList])
    }
    const addTodo3 = (value: listType) => {
        setDoneList([value, ...doneList])
    }
    return (
        <>
            <div className="App">
                <header className="App-header">
                    <h1>我的看板</h1>
                    <img className="App-logo" src={logo} alt="react"/>
                </header>
                <KanbanBoard>
                     <KanbanColumn
                         className="column-todo"
                         title={
                            <>
                                待处理 <button onClick={() => {
                                setShowAdd(true)
                            }} disabled={showAdd}>&#8853; 添加新卡片</button>
                            </>
                         }
                     >
                         {
                             showAdd && <KanbanNewCard addTodo={addTodo}/>
                         }
                         {
                             todoList.map(item => <KanbanCard {...item} key={item.id}/>)
                         }
                    </KanbanColumn>
                    <KanbanColumn
                        className="column-ongoing"
                        title={
                            <>
                                进行中 <button onClick={() => {
                                setShowAdd2(true)
                            }} disabled={showAdd2}>&#8853; 添加新卡片</button>
                            </>
                        }
                    >
                        {
                            showAdd2 && <KanbanNewCard addTodo={addTodo2}/>
                        }
                        {
                            ongoingList.map((item, index) => <KanbanCard {...item} key={index}/>)
                        }
                    </KanbanColumn>
                    <KanbanColumn className="column-done"
                                  title={
                                      <>
                                          已完成 <button onClick={() => {
                                          setShowAdd3(true)
                                      }} disabled={showAdd3}>&#8853; 添加新卡片</button>
                                      </>
                                  }>
                        {
                            showAdd3 && <KanbanNewCard addTodo={addTodo3}/>
                        }
                        {
                            doneList.map((item, index) => <KanbanCard {...item} key={index}/>)
                        }
                    </KanbanColumn>
                </KanbanBoard>
            </div>
        </>
    )
}

export default App
